<template>
  <div class="dashboard-editor-container">
    <el-row class="rowtop">
      <el-col :span="2">
        <el-button size="small" icon="el-icon-arrow-left">
          上一次检查
        </el-button>
      </el-col>
      <el-col :span="20" align="center">
        <span class="spanText">
          {{ date }}发起{{ title }}<span class="zd"> 重点 </span>,<span>检查对象 <el-link type="primary">24</el-link>家单位,发起整改
            <el-link type="primary">3</el-link>个
          </span>
        </span>
      </el-col>
      <el-col :span="2">
        <el-button size="small">
          下一次检查
          <i class="el-icon-arrow-right el-icon--right" />
        </el-button>
      </el-col>
    </el-row>

    <el-table :data="participatorList" :span-method="objectSpanMethod" border
      style="width: 100%; margin-top: 20px; margin-bottom: 20px;">
      <el-table-column v-for="(item, index) in tableLabel" :key="index" align="center" :prop="item.prop"
        :width="item.width" :label="item.label">
        <template slot-scope="{row,$index}">
          <span>

            <!-- {{ row }}
            {{ index }} -->

            <!-- 大指标 -->
            <span v-if="row[item.dstatus1]==1 && item.prop=='dzb'" class="dgs"
              @mouseover="mouseOver(row[item.dredBlackId1])">待改善</span>
            <span v-if="row[item.dstatus2]==1 && item.prop=='dzb'" class="ygs"
              @mouseover="mouseOver(row[item.dredBlackId2])">有改善</span>
            <span v-if="row[item.dstatus3]==1 && item.prop=='dzb'" class="dgs"
              @mouseover="mouseOver(row[item.dredBlackId3])">待改善</span>
            <span v-if="row[item.dstatus4]==1 && item.prop=='dzb'" class="ygs"
              @mouseover="mouseOver(row[item.dredBlackId4])">有改善</span>
            <!-- 大指标 -->
            <!-- 小指标 -->
            <span v-if="row[item.status1]==1 " class="dgs" @mouseover="mouseOver(row[item.redBlackId1])">待改善</span>
            <span v-if="row[item.status2]==1 " class="ygs" @mouseover="mouseOver(row[item.redBlackId2])">有改善</span>
            <span v-if="row[item.status3]==1 " class="dgs" @mouseover="mouseOver(row[item.redBlackId3])">待改善</span>
            <span v-if="row[item.status4]==1 " class="ygs" @mouseover="mouseOver(row[item.redBlackId4])">有改善</span>
            <!-- 小指标 -->

            <!-- 单位 -->
            {{ row[item.prop] }}
            <div v-if="row[index]==1">
              <span v-for="(item, index) in row['data'+index]" :class="item.classType"
                @mouseover="mouseOver(item.id)">{{ item.name }}</span>
            </div>
            <!-- 单位 -->
          </span>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog :title="dialogtitle" :modal-append-to-body="false" :visible.sync="newDialogFormVisible" append-to-body
      @open="open()">
      <div v-show="type=='1'" id="newEcharts1" style="width:100%;height:400px;" />
      <div v-show="type=='2'" id="newEcharts2" style="width:100%;height:400px;" />
    </el-dialog>
  </div>
</template>
<script>

// import resize from './mixins/resize'

var option = {};

import { historyCheckDetails, getRedBlackInfo } from '@/api/show'
export default {
  // mixins: [resize],
  props: {
  },
  data () {
    return {
      dialogtitle: "",
      newVisible: false,
      newDialogFormVisible: false,
      id: "60",
      title: "",
      date: "",
      dialogVisible: false,
      myChartzzt: null, // 柱状图
      type: "",
      tableLabel: [
        { label: '大指标', width: '', prop: 'id' },
        { label: '小指标', width: '', prop: 'large_score_category' },
        { label: '分数', width: '', prop: 'sales' },
        { label: '分数', width: '', prop: 'sale' },
        { label: '分数', width: '', prop: 'const' },
        { label: '分数', width: '', prop: 'profit' }
      ],
      participatorList: [
        { "dzb": "指标", "id": 59, "xzb": "小类（30%）", "scoring_description": 1, "large_score_category": "大类（25%", "rowspan": 3 },
        { "dzb": "指标", "id": 59, "xzb": "小类（30%）", "scoring_description": 2, "large_score_category": "大类（25%", "rowspan": 0 },
        { "dzb": "指标", "id": 59, "xzb": "小类（30%）", "scoring_description": 13, "large_score_category": "大类（25%", "rowspan": 0 },
        { "dzb": "指标", "id": 59, "xzb": "小类（30%）", "scoring_description": 12, "large_score_category": "逐日信息科技", "rowspan": 2 },
        { "dzb": "指标", "id": 66, "xzb": "小类（30%）", "scoring_description": 11, "large_score_category": "逐日信息科技1", "rowspan": 0 },
        { "dzb": "指标", "id": 66, "xzb": "小类（30%）", "scoring_description": 11, "large_score_category": "逐日信息科技1", "rowspan": 1 },
        { "dzb": "指标", "id": 66, "xzb": "e122", "scoring_description": 11, "large_score_category": "逐日信息科技12", "rowspan": 1 },
        { "dzb": "指标", "id": 66, "xzb": "e2", "scoring_description": 11, "large_score_category": "逐日信息科技1", "rowspan": 3 },
        { "dzb": "指标", "id": 66, "xzb": "13", "scoring_description": 11, "large_score_category": "逐日信息科技1", "rowspan": 0 },
        { "dzb": "指标", "id": 66, "xzb": "14", "scoring_description": 11, "large_score_category": "逐日信息科技1", "rowspan": 0 },
        { "dzb": "指标", "id": 66, "xzb": "15", "scoring_description": 11, "large_score_category": "逐日信息科技1", "rowspan": 0 },
      ],
      titleText: "",
      xAxisData: [],
      series: [],
    }
  },
  computed: {

  },
  watch: {
    chartData: {
      deep: true,
      handler (val) {
        this.setOptions(val)
      }
    }
  },
  mounted () {
  },
  beforeDestroy () {
  },
  created () {
    this.gethistoryCheckDetails()
  },
  methods: {


    initEcharts () {
      // 基于准备好的dom，初始化echarts实例
      console.log('newEcharts' + this.type)
      this.myChartzzt = this.$echarts.init(document.getElementById('newEcharts' + this.type));
      // 绘制图表

      option = {
        grid: {
          left: '3%',
          right: '0',
          bottom: '3%',
          containLabel: true
        },
        title: {
          text: this.titleText,
          // subtext:'',
          x: 'center',
          // y: '7px',
          textStyle: {
            // color: '#3A7BD5',
            // fontSize: 16
          },
          textAlign: 'left'
        },
        tooltip: {},
        xAxis: {
          data: this.xAxisData,
          axisLabel: { interval: 0, rotate: 50 }
        },
        yAxis: {},
        series: this.series
      }
      option && this.myChartzzt.setOption(option)
    },
    open () {
      this.$nextTick(() => {
        //  执行echarts方法
        console.log(22222);
        this.initEcharts()
      })
    },

    async mouseOver (id) {
      const data = { "id": id }
      const response = await getRedBlackInfo(data)
      if (response.code == 200) {
        this.newDialogFormVisible = true
        this.type = response.data.type;
        this.titleText = response.data.title;
        this.xAxisData = response.data.xAxisData;
        this.series = response.data.series;
        this.dialogtitle = response.data.master_title;
        // this.open();
      }


    },

    async gethistoryCheckDetails () {
      const data = { "id": this.id };
      const response = await historyCheckDetails(data)
      if (response.code == 200) {
        this.tableLabel = response.tableLabel
        this.participatorList = response.participatorList
        this.title = response.checkMasterInfo.master_name

        this.date = response.checkMasterInfo.inspector_time;
      }
    },
    //合并展示
    objectSpanMethod ({ row, column, rowIndex, columnIndex }) {
      if (columnIndex === 0) {
        if (row.rowspan != 1) {
          return {
            rowspan: row.rowspan,
            colspan: 1,
          };
        } else if (row.rowspan === 1) {
          return {
            rowspan: 1,
            colspan: 1,
          };
        } else {
          return {
            rowspan: 0,
            colspan: 0,
          };
        }
      }
    },
  },
}
</script>
<style lang="scss" scoped>
.el-table {
  margin-top: 20px;
}
.el-col {
  // border-style: solid;
  // border-width: 1px;
  // border-color: #000;
}
.rowtop {
  margin-top: 10px;
}
.spanText {
  font-size: 18px;
  line-height: 32px;
  height: 32px;
  color: #999999;
}

.zd {
  background-color: red;
  font-size: 12px;
  color: #fff;
  border-radius: 5px;
  height: 20px;
}
//待盖上
.dgs {
  margin-left: 5px;
  background-color: red;
  font-size: 12px;
  color: #fff;
  border-radius: 5px;
}

.ygs {
  margin-left: 5px;
  background-color: green;
  font-size: 12px;
  color: #fff;
  border-radius: 5px;
}
</style>

